<template>
    <div>
        <div class="clearfix">
            <div class="detila-div-80">
                <div>
                    <div class="radius-container">
                        <div class="border-b pad-10 font-w font-15">店铺广告图</div>
                        <div>
                          <el-form :model="form" label-width="130px" :rules="rules" ref="form" class="pad-t-1">
                            <el-form-item label="" label-width="20px">
                              <div class="flex">
                                <draggable id="content-box flex-item" v-model="posterUrls" dragable="true" :move="getdata" @update="datadragEnd">
                                  <template v-for="(item, key) in posterUrls" >
                                    <div class="pic-bar mar-r-30 flex-item"
                                         :key="key" @mouseover.stop="itemOver(key)" @mouseout.stop="itemOut(-1)">
                                      <div @click="deleteImgages(item,key)">
                                        <svg-icon icon-class="close"
                                                  :class="{'active':key==curIndex || key==curHover}"
                                                  class="close-icon font-16 noraml-hide" />
                                      </div>
                                      <img class="picture" :src="item"/>
                                    </div>
                                  </template>
                                </draggable>
                              </div>
                              <div class="tips mar-t-3">建议尺寸：750*750像素，可以拖拽图片调整顺序，最多上传10张</div>
                            </el-form-item>
                          </el-form>
                          <div class="upload-css" @click="uploadDialog = true">
                            <i class="el-icon-plus"></i>
                          </div>
                          <multi-file-upload :dialogVisible="uploadDialog" action="/api/common/uploadFiles" :data="token" :onConfirm="addMultiFiles" :onCancel="hideMultiFileUpload"></multi-file-upload>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="radius-container container-nonebg">
            <el-form label-width="80px">
                <el-button type="primary" @click="saveShopSetting">保存</el-button>
            </el-form>
        </div>
    </div>
</template>

<script>
  import { getToken } from '@/utils/auth'
  import { getByEnterpriseId, saveSupplier } from '@/api/user/enterprisePoster'
  import MultiFileUpload from '@/components/Upload/MultiFileUpload'
  import draggable from 'vuedraggable'

  export default {
    components: {
      draggable,
      MultiFileUpload
    },
    data() {
      return {
        curIndex: -1,
        curHover: -1,
        posterUrls: [],
        form: {
          enterpriseId: this.getEnterpriseId(),
          posterUrls: []
        },
        rules: {},
        token: {},
        uploadDialog: false,
        fileLoading: false
      }
    },
    created() {
      this.token = { accessToken: getToken() }
      this.initDate()
    },
    methods: {
      initDate() {
        getByEnterpriseId(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.posterUrls = response.data
          this.form.posterUrls = this.posterUrls
        })
      },
      saveShopSetting() {
        if (this.posterUrls.length <= 0) {
          this.$message.error('请上传图片')
          return
        }
        if (this.posterUrls.length >= 11) {
          this.$message({
            type: 'error',
            message: '最多只能上传10张主图'
          })
          return
        }
        this.form.posterUrls = this.posterUrls
        saveSupplier(this.form).then(response => {
          if (response.isError) return
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.initData()
        })
      },
      datadragEnd(evt) {
        evt.preventDefault()
        const filters = this.posterUrls
        for (let a = 0; a < filters.length; a++) {
          filters[a].index = a
        }
        this.posterUrls = filters
      },
      // 删除图片
      deleteImgages(item, key) {
        const posterUrls = this.posterUrls
        posterUrls.splice(key, 1)
        this.posterUrls = posterUrls
      },
      // 修改图片
      changeImgages(item, key) {
        const posterUrls = this.posterUrls
        const arry = this.swapArray(posterUrls, key, 0)
        this.posterUrls = arry
      },
      // 文件超出个数限制时的钩子
      handleExceed(file, fileList) {
        this.$message.warning('最多只能上传10张图')
      },
      getdata(evt) {
        // 这里evt.draggedContext后续的内容根据具体的定义变量而定
      },
      itemOver(index) {
        this.curHover = index
      },
      itemOut(index) {
        this.curHover = index
      },
      addMultiFiles(imageUrls) {
        if (!imageUrls || !imageUrls.length) {
          return
        }
        imageUrls.forEach(item => {
          if (!item.isError) {
            this.posterUrls.push(item.imageUrl)
          }
        })
        this.uploadDialog = false
      },
      hideMultiFileUpload() {
        this.uploadDialog = false
      }
    }
  }
</script>
<style lang="less" scoped>
  .noraml-hide{
    display: none!important;
  }
  .active{
    display: block!important;
  }
  .span-bar{
    padding: 0 50px;
  }
  .remove-btn{
    padding: 7px 6px!important;
  }
  .long-input{
    width: 80%;
  }
  .long-input-2{
    width: 55%;
    margin-right: 5%;
  }
  .long-input-3{
    width: 55%;
  }
  .short-input{
    width: 20%;
  }
  .short-input-2{
    width: 25%;
  }
  .default-input{
    width: 50%;
  }
  .tips{
    color: gray;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
  }
  .picture{
    width: 130px;
    height: 130px;
    display: block;
  }
  .pic-bar{
    position: relative;
    display: inline-block;
    .close-icon{
      position: absolute;
      right: -30px;
      top: -11px;
      width: 31px;
      height: 40px;
      padding: 0 7px;
      cursor: pointer;
    }
    span{
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
      display: block;
      color: #fff;
      text-align: center;
      padding: 3px 0;
      background: rgba(0,0,0,0.5);
      cursor: pointer;
    }
  }
  .pic-add{
    background: #fff;
    display: inline-block;
    vertical-align: top;
    border: #d3d3d3 1px dashed;
    border-radius: 5px;
    padding: 0 45px;
  }
  .btn-change{
    background: none!important;
    border: none!important;
    box-shadow: 0 0 0!important;
    font-size: 15px!important;
  }
  .upload-css{
    margin: 20px;
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    line-height: 146px;
    vertical-align: top;
    text-align: center;
    font-size: 50px;
    i{
      font-size: 28px;
      color: #8c939d;
    }
  }
</style>
